import React from 'react';
import ReactDOM from 'react-dom';
import { createHashHistory } from 'History';
import { Router, Route, useRouterHistory } from 'react-router';
import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
import { Provider } from 'mobx-react';
import RepairView from './components/designer/form/view/repair';
import FormViewPage from "./components/designer/form/view";
import FormViewStore from "./stores/form/ViewStore";
import BrowserHrm from './components/common/browser-hrm';
import "./styles/index.css";
import './styles/formview.css';

const routing = new RouterStore();
const edcFormViewStore = new FormViewStore();

const allStore = window.edcStores = {
  routing,
  edcFormViewStore
};

const browserHistory = useRouterHistory(createHashHistory)({
  queryKey: '_key',
  basename: '/',
});
const history = syncHistoryWithStore(browserHistory, allStore.routing);

const Root = () => (
  <Provider {...allStore}>
    <Router history={history}>
      <Route path='/' component={FormViewPage} />
      <Route path='/repair' component={RepairView} />
      <Route path='edc/browserHrm' component={BrowserHrm} />
    </Router>
  </Provider>
);

ReactDOM.render(<Root />, document.getElementById('container'));